<template>
    <view>
        <a-video ref="video" audioOnly hideSwitch   
                @status="handlerChangeStatus"
                :audioBackImage="info.tplParams.imageUrl" 
                :audioUrl="info.tplParams.audioUrl"></a-video>
        <view class="b-info">
            <div class="b-name">
                <image class="audio-play" :class="playing?'playing':''" src="/static//audio_play.png"></image>{{info.name}}
            </div>
            <!-- <text class="b-time">{{info.createTime}}</text> -->
        </view>
        <view class="divider"></view> 
        <text class="b-desc" v-if="info.desc">{{info.desc}}</text>
        <empty tips="暂无详情" :isLoading="!!info.desc"></empty>
    </view>
</template>

<script>
    import AVideo from '@/components/a-video/index.vue'
    import Empty from '@/components/empty'
    export default{
        components:{
            AVideo,
            Empty
        },
        props:['info'],
        data(){
            return {
                playing:false
            }
        },
        methods:{
            handlerChangeStatus(val){
                this.playing=val
            }
        }
    }
</script>

<style scoped lang="scss">
    .divider{
        height: 10px;
        // width: 80%;
        margin: 5px auto;
        background-color: #f5f5f5;
    }
    .b-desc{
        font-size: 20px;
        word-break: break-all;
        display: block;
        padding: 30px;
        text-align: center;
    }
    .b-info{
        padding: 20px;
        .b-name,.b-desc,.b-time{
            display: block;
        }
        .b-name{
            font-weight: bold;
            font-size: 1.3rem;
        }
        .b-time{
            color:#808080;
            text-align: right;
        }
        .b-name{
              display: flex;
              flex-direction: row;
              align-items: center;
            
        }
        .audio-play{
            display: inline-block;
            width: 25vw;
            height: 25vw;
            margin-right: 5vw;
        }
        .audio-play.playing{
            animation: rotate 2s linear infinite;
        }
    
        
        @keyframes rotate {
          0% {
            transform: rotate(0deg);
          }
          25% {
            transform: rotate(90deg);
          }
          50% {
            transform: rotate(180deg);
          }
          75% {
            transform: rotate(270deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
    }
</style>